<template>
  <div class="main">
    <div class="topTitle">{{ props.title }}</div>
    <div class="form_content">
      <NScrollbar>
        <div class="content">
          <NSpace>
            <NForm ref="formRef" require-mark-placement="left" label-placement="left" :label-width="160"
              :model="formValue" label-align="right">
              <NSpace justify="space-between">
                <NFormItem label="考核名称:">
                  <NInput class="commonWidth" v-model:value="formValue.assessName" disabled />
                </NFormItem>
                <NFormItem label="岗位职级:">
                  <NSelect :options="levelList" class="commonWidth" v-model:value="formValue.dutyCode" clearable />
                </NFormItem>
              </NSpace>
              <NSpace justify="space-between">
                <NFormItem label="考核姓名:">
                  <NInput class="commonWidth" v-model:value="formValue.userName" disabled />
                </NFormItem>
                <NFormItem label="考核时间:">
                  {{ formValue.startTime }} 至 {{ formValue.endTime }}
                </NFormItem>
              </NSpace>
              <NSpace justify="space-between">
                <NSpace>
                  <NFormItem label="考核情况:" path="demand">
                    <NSelect :options="graceList" class="commonWidth" v-model:value="formValue.attend" clearable
                      disabled />
                  </NFormItem>
                  <NButton type="primary" @click="RunLink">
                    查看考勤记录
                  </NButton>
                </NSpace>
                <NFormItem label="提交状态:">
                  <NSelect :options="statusList" class="commonWidth" v-model:value="formValue.submitStatusCode"
                    clearable disabled />
                </NFormItem>
              </NSpace>
              <NFormItem label="从事和分管工作:">
                <NInput v-model:value="formValue.work" type="textarea" style="height: 130rem" />
              </NFormItem>
              <NFormItem label="十月工作纪实:" path="demand">
                <NInput v-model:value="formValue.firstMonthWork" type="textarea" style="height: 130rem" />
              </NFormItem>
              <NFormItem label="十一月工作纪实:" path="demand">
                <NInput v-model:value="formValue.secondMonthWork" type="textarea" style="height: 130rem" />
              </NFormItem>
              <NFormItem label="十二月工作纪实:" path="demand">
                <NInput v-model:value="formValue.thirdMonthWork" type="textarea" style="height: 130rem" />
              </NFormItem>
              <NFormItem label="下一季度目标计划:" path="demand">
                <NInput v-model:value="formValue.workPlan" type="textarea" style="height: 130rem" />
              </NFormItem>
              <NFormItem label="最满意的一项工作内容:" path="demand">
                <NInput v-model:value="formValue.satisfiedWork" type="textarea" style="height: 130rem" />
              </NFormItem>
              <NFormItem label="考核等次建议(邬福平):" path="demand">
                <NInput v-model:value="formValue.firstPropose" type="textarea" style="height: 130rem" />
              </NFormItem>
              <NFormItem label="考核等次建议(张璞):" path="demand">
                <NInput v-model:value="formValue.secondPropose" type="textarea" style="height: 130rem" />
              </NFormItem>
            </NForm>
          </NSpace>
        </div>
      </NScrollbar>
    </div>
  </div>
  <FixedAction>
    <div style="display: flex">
      <NSpace justify="start" style="flex: 0 0 42%">
        <NButton style="width: 78px; color: #5fb17f" ghost @click="goBack">
          <template #icon>
            <NImage :src="VBackImg" style="width: 25rem; height: 25rem" preview-disabled></NImage>
          </template>
          返回
        </NButton>
      </NSpace>

      <NSpace justify="center">
        <NButton type="primary" style="background-color: #5faab1;" @click="confirm(1)" :loading="loading">
          保存草稿
        </NButton>
        <NButton type="primary"  @click="confirm(0)" :loading="loading">
          提交
        </NButton>
      </NSpace>
    </div>
  </FixedAction>

  <NModal :auto-focus="false" v-model:show="modalVisible">
    <VDialogContent @close="modalVisible = false" @submit="againConfirm" title="保存提示">
      <div style="width: 300rem; height: 100rem; text-align: center; line-height: 100rem">
        {{ contentContent }}
      </div>
    </VDialogContent>
  </NModal>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import {
  NSpace,
  NForm,
  NInput,
  NFormItem,
  NButton,
  NScrollbar,
  NSelect,
  useMessage,
  NImage,
  NModal,
  type FormInst
} from 'naive-ui'
import router from '@/router'
import { useTagStore } from '@/stores/layout'
import FixedAction from '@/components/FixedAction.vue'
import { sendRequest } from '@/utils/api'
import { useRoute } from 'vue-router'
import VBackImg from '@/assets/images/back.png'
import VDialogContent from '@/views/OA/Common/DialogContent.vue'

const route = useRoute()
const tags = useTagStore().tags
const message = useMessage()

const props = defineProps({
  title: { type: String, default: () => '考核单详情' },
  id: { type: [Number, String], default: () => null },
  flag: { type: [Number, String], default: () => null }
})

const formValue = reactive<Record<string, any>>({
  draft: null,
  id: null,

  assessName: null, //考核名称
  duty: null, //岗位职级
  dutyCode: null,
  userName: null, //考核姓名
  startTime: null,
  endTime: null, //考核时间
  attend: null,
  attendCode: null, // 考勤情况
  submitStatusCode: null, //	提交状态

  work: null, //从事和分馆工作
  firstMonthWork: null, //工作纪实1
  secondMonthWork: null,
  thirdMonthWork: null,
  workPlan: null, //下一季度目标
  satisfiedWork: null, //最满意的一项工作内容
  firstPropose: null, //考核等次建议(副馆长1)
  secondPropose: null //考核等次建议(副馆长2)
})

//岗位职级
const levelList: any = ref([])
const getLevel = async () => {
  const [error, res] = await sendRequest({
    module: 'office',
    api: 'roomType',
    override: {
      params: {
        dicCode: 'A04'
      }
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  levelList.value = []
  res.data.map((i: any) => {
    levelList.value.push({
      label: i.dicName,
      value: i.dicCode
    })
  })
}
getLevel()

//考勤统计
const graceList: any = ref([])
const getTotal = async () => {
  const [error, res] = await sendRequest({
    module: 'office',
    api: 'roomType',
    override: {
      params: {
        dicCode: 'A09'
      }
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  graceList.value = []
  res.data.map((i: any) => {
    graceList.value.push({
      label: i.dicName,
      value: i.dicCode
    })
  })
}
getTotal()

//状态
const statusList = ref()
const getStatus = async () => {
  const [error, res] = await sendRequest({
    module: 'office',
    api: 'roomType',
    override: {
      params: {
        dicCode: 'A07'
      }
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  statusList.value = []
  res.data.map((i: any) => {
    statusList.value.push({
      label: i.dicName,
      value: i.dicCode
    })
  })
}
getStatus()

//查看考勤记录
const userId = ref()
const RunLink = () => {
  router.push({
    path: '/OA/Attendance/mineAttendance',
    query: { userId: userId.value }
  })
}

//获取详情
const getInfo = async () => {
  const [error, res] = await sendRequest({
    module: 'exam',
    api: 'memberItem',
    override: {
      params: {
        assessPersonId: route.query.id as never
      }
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  userId.value = res.data.userId
  Object.keys(formValue).map((it: any) => {
    if (it == 'assessPersonType') {
      formValue.assessPersonType =
        res.data.assessPersonType == 2
          ? '副馆长'
          : res.data.assessPersonType == 1
            ? '负责人'
            : '部门成员'
    } else {
      // @ts-ignore
      formValue[it] = res.data[it]
    }
  })
}

// 确定
const loading = ref(false)
const formRef = ref<FormInst | null>(null)
const modalVisible = ref(false)
const contentContent = ref()

const confirm = (status: number) => {
  formValue.draft = status
  formRef.value?.validate(async (err) => {
    if (err) return
    contentContent.value = status ? '您确定要保存草稿吗？' : ' 您确定要提交申请吗？'
    modalVisible.value = true
  })
}

const againConfirm = async () => {
  // if (route.query.id && !props.flag) {
  //   const [error, res] = await sendRequest({
  //     module: 'exam',
  //     api: 'SubmitUpdate',
  //     override: {
  //       data: {
  //         ...formValue,
  //         id: props?.id
  //       }
  //     }
  //   })
  //   if (error) return message.error(error.message)
  //   message.success(res.msg)
  //   goBack()
  // } else {
  //   const [error, res] = await sendRequest({
  //     module: 'exam',
  //     api: 'SubmitAdd',
  //     override: {
  //       data: formValue
  //     }
  //   })
  //   if (error) return message.error(error.message)
  //   message.success(res.msg)
  //   goBack()
  // }
  formValue.assessPersonType =
    formValue.assessPersonType == '副馆长' ? 2 : formValue.assessPersonType == '负责人' ? 1 : 0
  const [error, res] = await sendRequest({
    module: 'exam',
    api: 'SubmitAdd',
    override: {
      data: formValue
    }
  })
  if (error) return message.error(error.message)
  message.success(res.msg)
  goSubmit()
  modalVisible.value = false
}


//提交完跳转我的提交
const goSubmit = () => {
  const index = tags.findIndex((item: any) => item.path === router.currentRoute.value.fullPath)
 tags.splice(index, 1)
  if(formValue.draft) return router.push({ path: '/OA/UserCenter/Drafts' })
  router.push({ path: '/OA/UserCenter/Submit' })
}

// 返回
const goBack = () => {
  const index = tags.findIndex((item: any) => item.path === router.currentRoute.value.fullPath)

  tags.splice(index, 1)
if (tags.length == 0) {
    router.push({ path: '/OA/Workbench/UserDesktop' })
  } else history.back()
}

watch(
  () => route,
  () => {
    if (route.path == '/OA/Examination/SubmitDetail' && route.query.id) getInfo()
  },
  { deep: true, immediate: true }
)
</script>

<style scoped lang="scss">
@mixin CommonFont {
  font-size: 16rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}

.commonWidth {
  width: 360rem;
}

.commonWidthA {
  width: 155rem;
}

.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .topTitle {
    width: 100%;
    height: 64rem;
    border-bottom: 1px solid #fff;
    padding: 20rem;
    margin-bottom: 20rem;
    @include CommonFont;
  }

  .form_content {
    width: 100%;
    height: 100%;
    padding: 0 20rem 0rem;

    .content {
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding: 20rem 0 180rem;
      overflow-y: scroll;
      background-color: #ebeceb;

      .scope {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: 130rem;
        background: #e1e1e1;
        padding: 15rem 20rem;

        .userBox {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: auto;
          min-width: 150rem;
          height: 40rem;
          background-color: #fff;
          border-radius: 4rem;
          padding: 0 10rem;
          margin-right: 20rem;
        }
      }
    }
  }
}

.iconStyle {
  margin-right: 5rem;
  color: #5fb17f;
}

.progress {
  width: 100%;
  min-height: 50rem;
  background-color: #d5e2d8;
  border-radius: 5rem;
  padding: 10rem;
  display: flex;
  align-items: center;
  margin-top: 10rem;
}

.content::-webkit-scrollbar {
  display: none;
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-content) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}
</style>
